<template>
  <div class="event-comment" @contextmenu.prevent>
    <textarea ref="inputEl" v-if="isRename" @blur="onBlur"
              v-model="comment"/>
    <div v-else class="text" @dblclick.prevent="onRename">{{ data.comment }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, nextTick, PropType, ref } from 'vue';
import { EventComment } from '../store/events';
import { ProvideKey } from './msg';

export default defineComponent({
  name: 'comp-event-comment',
  emits: [],
  props: {
    data: {
      type: Object as PropType<EventComment>,
    },
  },
  setup(props, { emit }) {
    const changeComment = inject(ProvideKey.ChangeComment, (id: string, comment: string) => {});
    const comment = ref(props.data?.comment || '');
    const isRename = ref(false);
    const inputEl = ref();
    return {
      inputEl,
      isRename,
      comment,
      onRename() {
        isRename.value = true;
        nextTick(() => {
          inputEl.value?.focus();
        });
      },
      onBlur() {
        // isRename.value = false;
        // changeComment(props.data!.id, comment.value);
      },
    };
  },
});
</script>
<style scoped lang="scss">
.event-comment {
  text-align: left;
  border: 1px solid #dddd48;
  background-color: #fdfeb7;
  height: 25px;

  textarea {
    resize: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-width: 0;
    padding: 0;
    font-size: 15px;
    outline: none;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    background: transparent;
  }

  .text {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    font-size: 15px;
    width: 100%;
    height: 100%;
  }
}
</style>
